{if isset($jobFlows)}
<style>
    .clearfix:after {
        content: '\20';
        display: block;
        height: 0;
        clear: both;
    }

    .time-horizontal {
        margin-top: 40px;
    }

    .time-horizontal li {
        list-style-type: none;
        float: left;
        position: relative;
        max-width: 25%;
        min-width: 15%;
        padding-top: 20px;
        font-size: 14px;
        border-top: 1px dashed #ccc;
        cursor: pointer;
    }

    .time-horizontal li:last-child {
        width: 60px;
        border-top: 1px dashed transparent !important;
    }

    .time-horizontal li:first-child>div,
    .time-horizontal li:nth-child(2)>div {
        margin-left: -3px;
    }

    .time-horizontal li:last-child>div {
        margin-left: -10px;
    }

    .time-horizontal li>b:before {
        content: '';
        position: absolute;
        top: -18px;
        left: 0;
        width: 30px;
        height: 30px;
        border: 2px solid #f2f2f2;
        border-radius: 50%;
        background: #f2f2f2;
        color: #fff;
        font-size: 19px;
        text-align: center;
    }

    .time-horizontal li.solid {
        border-top: 1px solid #ccc;
    }

    .time-horizontal li.pass>b:before {
        content: '✔';
        border: 2px solid #008118;
        background: #008118;
    }

    .time-horizontal li.no-pass>b:before {
        content: '×';
        border: 2px solid #fa0000;
        background: #fa0000;
        font-size: 25px;
    }
</style>

<div class="job-flow-container">
    <h2>{$jobProcess ?: '当前审批进度'}</h2>
    <ul class="time-horizontal clearfix">
        {if $jobFlows->isEmpty()}
            {foreach $jobFlowSettings as $s}
                <li>
                    <b></b>
                    <div>{$s.name}</div>
                </li>
            {/foreach}
        {elseif $jobFlowLast.is_end == 1/}
            {foreach $jobFlows as $job}
            <li {if $job->getData('status') == \app\common\model\JobApprove::JOB_STATUS_REJECT}class="no-pass"{else/}class="pass solid"{/if}>
                <span class="text-red">{$job.remark}</span>
                <b></b>
                <div>{$job.current_name}</div>
            </li>
            {/foreach}
        {else/}
            {foreach $jobFlowSettings as $s}
            {php}
                $msg = "";
                foreach($jobFlows as $job)
                {
                    if($job->current_node == $s->node)
                    {
                        $msg=$job->remark;
                        break;
                    }
                }
            {/php}
            <li class="{if $s.node < $jobFlowLast.current_node}pass solid {elseif $s.node <=$jobFlowLast.current_node } pass {/if}">
                <span class="text-red">{$msg}</span>
                <b></b>
                <div>{$s.name}</div>
            </li>
            {/foreach}
        {/if}
    </ul>
</div>
{/if}